/*
  学习目标：React生命周期-更新阶段
  三大阶段：挂载时、更新时、卸载时
  挂载时 等同于Vue中的创建和挂载二合一
  
// React中触发组件更新，有两种方式
// 1. setState
// 2. 🔔props变化

// 💥 注意：
// 1. 更新阶段的钩子函数中，不能调用setState会造成死循环
// 2. React中的更新指的是数据更新，Vue中的更新阶段指的是DOM更新
*/

import React from 'react';
export default class App extends React.Component {
  state = {
    count: 100,
  };
  render() {
    // ❌render中不能再更新数据
    // this.setState({ count: this.state.count + 1 });
    // console.log('render触发，重新渲染页面 -----> ');
    return (
      <>
        <h1> App - {this.state.count}</h1>
        {/* sst */}
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点我修改count
        </button>

        <Child count={this.state.count}></Child>
      </>
    );
  }
  // cdup
  componentDidUpdate() {
    // console.log('componentDidUpdate触发 -----> ');
    // ❌componentDidUpdate中不能再更新数据
    // this.setState({ count: this.state.count + 1 });
  }
}

class Child extends React.Component {
  render() {
    console.log('Child - render触发，重新渲染页面 -----> ');
    return <div></div>;
  }
  componentDidUpdate() {
    console.log('Child - componentDidUpdate触发 -----> ');
  }
}
